<template>
    <div>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item :key="index" v-for="(item, index) in swipeImage">
                <img :src="item" style="width:100%"/>
            </van-swipe-item>
        </van-swipe>

        <div class="title">
            <span>推荐歌单</span>
        </div>
        <van-divider class="margin"/>

        <van-grid class="grid" :column-num="3" :border="false">
            <van-grid-item @click="$router.push({name:'detail',params:{id:item.id}})" :key="index" v-for="(item,index) in playlists">
                <van-image width="100" height="100" :src="item.coverImgUrl" />
                <span style="text-align:left;font-size:15px;margin:0px 0px;">-> &nbsp;&nbsp;{{item.name.slice(0,10)}} &nbsp;&nbsp;-|</span>
            </van-grid-item>
        </van-grid>

        <div class="Ititle">
            <span>推荐歌曲</span>
            <!-- <span @click="toMusic">播放</span> -->
            <!-- <span @click="addSongList">全部添加至播放列表</span> -->
            <van-tag @click="addSongList" class="tag" color="#F4F4F4" text-color="#333" round type="primary">+播放列表</van-tag>
        </div>
        <van-divider class="margin"/>

        <van-cell @click="addSong(item)" style="text-align:left;" v-for="(item,index) in songlists" :key="index">
            <div class="index">
            <van-image class="imagemargin" width="60px" :src="item.picUrl" />
            <div class="indexname">
                <span><span class="song">{{item.name.slice(0,20)}} </span><span class="singer">- {{item.song.artists[0].name}}</span></span>
                <van-icon name="play-circle-o" size="30" color="gray"/>
            </div>
            </div>
        </van-cell>

        <div class="a" @click="toMusic">
            <van-image width="65px" :src="require('@/assets/img/swipeImage/xiao.png')"/>
        </div>
        <!-- <div class="b"></div> -->

    </div>
</template>

<script>
import List from '@/api/index'
import { Dialog } from 'vant';
export default {
    data(){
        return{
            swipeImage:[
                require('@/assets/img/swipeImage/bg1.jpg'),
                require('@/assets/img/swipeImage/bg2.jpg'),
                require('@/assets/img/swipeImage/bg3.jpg'),
                require('@/assets/img/swipeImage/bg4.jpg'),
                require('@/assets/img/swipeImage/bg5.jpg'),
            ],
            playlists:[],
            songlists:[]
        }
    },
    mounted(){
        this.init();

    },methods:{
        toMusic(){
            if(this.$store.getters.getSongCur==-1){
                // alert("请添加音乐到音乐播放列表");
                Dialog.alert({
                message: '请添加音乐到音乐播放列表',
                theme: 'round-button',
                }).then(() => {
                // on close
                });
                return;
            }
            this.$router.push('/music3');
        },
        addSongList(){
            let list = [];
            for(let i=0; i<this.songlists.length; i++){
                list.push({
                    id: this.songlists[i].id,
                    name: this.songlists[i].name,
                    pic: this.songlists[i].picUrl,
                });
            }
            this.$store.commit('setSongList',list);
            this.$store.commit('setSongCur', 0);
        },
        addSong(item){
            this.$store.commit('pushSongList',{id:item.id, name:item.name, pic:item.picUrl});
            this.$router.push('/music3');
            //console.log('songlist',this.$store.getters.getSongList);
            //console.log('cur:::',this.$store.getters.getSongCur)
            //$router.push({name:'music',params:{id:item.id, name:item.name, pic:item.picUrl}})
        },
        init(){
            let _this = this;
            List.getPlayList().then(function(res){
                _this.playlists = res.data.playlists.slice(0,9);
                //console.log(_this.playlists)
            })

            List.getNewSong().then(function(res){
                _this.songlists = res.data.result;
                //console.log(_this.songlists)
            })
        }
    }
}
</script>


<style scoped>
.margin{
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 0px;
}
.title{ 
  height:40px; 
  line-height:75px; 
  display:flex;
  justify-content:space-between
}
.title span{
  margin-left: 25px;
  font-size: 18px;
}
.index{
  /* border: 1px solid #000; */
  display:flex;
  margin-right: 8px;
  margin-left: 8px;
}
.indexname{
  /* border: 1px solid #000; */
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.imagemargin{
  margin-left: 5px;
  margin-right: 25px;
}
.song{
  font-size: 16px;
}
.singer{
  font-size: 12px;
  color: gray;
}
.grid{
  /* border: 1px solid #000; */
  margin-left: 10px;
  margin-right: 10px;
}
.tag{
    /* width: 20%;
    height: 80%; */
    padding: 1.5% 5%;
    border: 1px solid #aca9a73b;
    color: #aca9a7;
    font-size:16px;
    /* margin-right: 5%;  */
    /* list-style: none; */
    /* white-space: nowrap; */
}
.Ititle{
    /* height:40px; 
    width: 100%;
    line-height:75px;  */
    font-size:20px;
    align-items: center;
    display:flex;
    margin: 5%;
    justify-content:space-between;
    /* border: 1px solid #000; */
}
.a{
    width: 65px;
    height: 65px;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.888);
    position: fixed;
    /* left: 100px;
    top: 100px; */
    right: 45px;
    bottom: 45px;
    z-index: 100;
    box-shadow: 0 0 10px 2px #33333355;
}
.b{
    width: 100%;
    height: 9%;
    /* border-radius: 100%; */
    background: rgba(255, 255, 255, 0);
    position: fixed;
    /* left: 100px;
    top: 100px; */
    /* right: 45px; */
    bottom: 0;
    z-index: 100;
    box-shadow: 0 0 10px 2px #33333333;
}
</style>